import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Redirect } from 'react-router-dom';

import { Link } from 'react-router-dom';
import { connect } from 'react-redux';

import PasswordBox from 'react-uwp/PasswordBox';
import TextBox from 'react-uwp/TextBox';
import Image from 'react-uwp/Image';
import Tabs, { Tab } from 'react-uwp/Tabs';
import CheckBox from 'react-uwp/CheckBox';

import ThirdLogin from '../components/auth/ThirdLogin';
import { signInWithCb } from '../store/fakeAuth';
import { baseInput } from '../utils/commonStyle';
import { REGISTER } from '../store/user';
import { Alert } from 'antd';
import { showErrmsg, register } from '../store/user';
import SendCode from '../components/common/SendCode';
const propTypes = {
  signInWithCb: PropTypes.func.isRequired,
  location: PropTypes.object.isRequired,
  logged: PropTypes.bool.isRequired
};
export class Register extends Component {
  constructor(props) {
    super(props);
    this.state = {
      phone: '',
      password: '',
      phoneDisable: false,
      code: ''
    };
  }
  componentDidMount() {
    this.closeErrMsg();
  }
  disablePhone = state => {
    this.setState({
      phoneDisable: state
    });
  };
  closeErrMsg() {
    const { errMsg, showErrmsg } = this.props;
    if (errMsg) {
      showErrmsg('', REGISTER);
    }
  }
  submit() {
    const { phone, code, password } = this.state;
    const { showErrmsg, register } = this.props;
    if (!phone) {
      showErrmsg('手机号不能为空');
      return;
    }
    if (!phone.match('^[1][34578][0-9]{9}$')) {
      showErrmsg('手机号码格式不正确');
      return;
    }
    if (!password) {
      showErrmsg('密码不能为空');
      return;
    }
    if (!code) {
      showErrmsg('验证码不能为空');
      return;
    }
    const res = register({
      phone,
      password,
      code
    });
    //路由跳转操作
  }
  toLogin() {
    this.closeErrMsg();
    this.props.history.replace('/auth/login');
  }
  render() {
    const { errMsg, showErrmsg } = this.props;
    const { phone } = this.state;
    return (
      <div
        className="authWrap"
        style={{ width: '20rem', padding: '0 1.76rem' }}
      >
        <div className="logo">
          <Image
            src={require('../assets/img/common/logo.png')}
            className="imgCover"
            onClick={() => this.props.history.replace('')}
          />
        </div>
        <div className="authForm">
          <Alert
            message={errMsg}
            type="error"
            showIcon
            style={{ width: '100%', display: errMsg ? 'block' : 'none' }}
          />
          <TextBox
            style={{ ...baseInput, margin: '0.96rem 0' }}
            onChangeValue={value => {
              this.closeErrMsg();
              this.setState({ phone: value });
            }}
            placeholder="请输入手机号"
          />
          <div
            className="dfr w100"
            style={{ alignItems: 'stretch', marginBottom: '0.96rem' }}
          >
            <div className="dfr fx1" style={{ marginRight: '0.4rem' }}>
              <TextBox
                style={{ ...baseInput, margin: '0' }}
                placeholder="请输入验证码"
                onChangeValue={value => {
                  this.closeErrMsg();
                  this.setState({ code: value });
                }}
              />
            </div>{' '}
            <SendCode
              phone={phone}
              disablePhone={this.disablePhone}
              api="/registerVaild"
            />
          </div>
          <PasswordBox
            style={baseInput}
            passwordBoxHeight={45}
            placeholder="8位以上密码"
            onChangeValue={value => {
              this.closeErrMsg();
              this.setState({ password: value });
            }}
          />
          <div style={{ width: '100%', marginTop: '0.96rem' }}>
            <p className="fnormal icon-check">
              我已同意51瞧瞧商城
              <Link to="" target="_blank">
                《用户协议》
              </Link>
            </p>
          </div>
          <button
            className="btn"
            style={{ margin: '0.96rem 0' }}
            onClick={() => this.submit()}
          >
            注册
          </button>
          <div className="dfrc fx1 w100">
            <a className="aNormal" onClick={() => this.toLogin()}>
              已有账户立即登录
            </a>
            {/* 判断路由中是否已经存在登录 有的话goback */}
          </div>
        </div>
        <div style={{ width: '100%', marginTop: '1.2rem' }}>
          <ThirdLogin />
        </div>
      </div>
    );
  }
}

Register.propTypes = propTypes;
const mapStateToProps = state => ({
  logged: state.logged,
  errMsg: state.user.errMsg
});

const mapDispatchToProps = {
  showErrmsg,
  signInWithCb
};

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Register);
